<template>
    <el-menu 
    :default-active="$route.path" 
    background-color="#282c34" text-color="#fff" :router="true">
     <SubMenu :menusData="menusData"></SubMenu>
    </el-menu>
</template>

<script lang="ts" setup>
// 引入图标
import {onMounted,computed, watchEffect } from 'vue';
import SubMenu from './SubMenu.vue';
// 1. 引入仓库方法
import { useAdminStore } from '@/store/admin';
// console.log(useAdminStore,333);

// 2. 调用仓库方法，得到仓库对象
const adminStore= useAdminStore();
onMounted(() => {
    // 4. 调用仓库公共方法
    // adminStore.getAdminInfoAsync();
    // formatArr()
})

// const formatArr=async()=>{
//     const permissions=await adminStore.getAdminInfoAsync()
//     console.log(permissions,"permissions"); 
// }

watchEffect(()=>{
    // console.log(adminStore.menusData);
})
// 筛选菜单数据
const menusData=computed(()=>{
    return menusDataFormat(adminStore.menusData)
})
const menusDataFormat = (menusData: menuItem[]): menuItem[] => {
    return menusData.reduce((prev: any[], item) => {
        if (item.type == 'button') {
            return prev;
        }
        // 代码执行到这一行，说明 item.type 不是 button
        if (item.children) {
            const filterChildren = menusDataFormat(item.children);
            if (filterChildren.length > 0) {
                // 代码执行到这一行，说明 item.children 是需要留下的
                return [
                    ...prev,
                    {
                        ...item,
                        children: filterChildren
                    }
                ]
            }
            // 代码执行到这一行，说明 item 原本有 children 属性
            // 但是，所有的 children 都不是菜单数据，因此不保留 children
            return [
                ...prev,
                {
                    _id: item._id,
                    title: item.title,
                    icon: item.icon,
                    path: item.path
                }
            ]
        }
        // 代码执行到这一行，说明 item 没有 children
        return [
            ...prev,
            item
        ]

    }, []);
}
</script>

<style >
.el-menu {
    --el-menu-item-height: 50px;
    border-right: none;
}
.el-aside{
    min-height: 100vh
}

/* 设置选中的菜单项的样式 */
/* .el-menu-item.is-active {
    color: #fff;
    background-color: #d462ff;
} */
.el-menu-item.is-active {
    color: #fff;
    background-color: #0256ff;
}
</style>